<template>
  <div class="search">
    <h1>报修管理</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>住户类型</span>
    <el-select
      v-model="HouseholdType"
      style="width: 200px"
      placeholder="请选择住户类型"
    >
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <span>报修状态</span>
    <el-select
      v-model="RepairReportingStatus"
      style="width: 200px"
      placeholder="请选择报修状态"
    >
      <el-option
        v-for="item in options2"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <br />
    <span>预约日期</span>
    <el-date-picker
      v-model="date"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    />
    <br />
    <span>住户姓名</span>
    <el-input
      v-model="hold_name"
      style="width: 200px; margin-right: 30%"
      placeholder="请输入"
    ></el-input>
    <el-button type="primary" @click="get">查询</el-button>
    <el-button type="default" @click="reset">重置</el-button>
  </div>
  <div class="page">
    <div class="page-header">
      <div class="page-header-left">
        <span>报修列表</span>
      </div>
      <div class="page-header-right">
        <el-button
          type="primary"
          style="margin-top: 1rem"
          @click="to('tenement/newRepair')"
          >+&nbsp;新建</el-button
        >
        <el-button type="default" style="margin-top: 1rem; margin-right: 2rem"
          >批量操作</el-button
        >
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" />
      <el-table-column property="home" label="报修房屋" />
      <el-table-column property="project" label="维修项目" />
      <el-table-column property="title" label="标题" />
      <el-table-column property="person" label="报修人" />
      <el-table-column property="appointDate" label="预约日期" />
      <el-table-column property="status" label="维修状态" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="editor(row.id)">编辑</el-button>
          <el-button type="text" @click="deleteById(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        style="margin-bottom: 2rem"
        background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { dayjs, ElMessage, ElTable } from "element-plus";
import to from "@/utils/to.js";
import axios from "axios";
import router from "@/router";

const HouseholdType = ref("");
const RepairReportingStatus = ref("");
const date = ref("");
const hold_name = ref("");

const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);

const options1 = [
  { value: "", label: "全部" },
  { value: "业主", label: "业主" },
  { value: "亲戚", label: "亲戚" },
  { value: "租户", label: "租户" },
  { value: "朋友", label: "朋友" },
];

const options2 = [
  { value: "", label: "全部" },
  { value: "审核中", label: "审核中" },
  { value: "审核通过", label: "审核通过" },
  { value: "审核不通过", label: "审核不通过" },
];

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  get();
};

const handleCurrentChange = (newNum) => {
  pageNum.value = newNum;
  get();
};

const reset = () => {
  HouseholdType.value = "";
  RepairReportingStatus.value = "";
  date.value = "";
  hold_name.value = "";
  get();
};

const get = () => {
  const config = {
    url: "http://localhost:8080//property/repair/query-page",
    method: "GET",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
    params: {
      page: pageNum.value,
      pageSize: pageSize.value,
      userType: HouseholdType.value,
      status: RepairReportingStatus.value,
      appointStart:
        date.value[0] === undefined
          ? null
          : dayjs(date.value[0]).format("YYYY-MM-DD"),
      appointEnd:
        date.value[1] === undefined
          ? null
          : dayjs(date.value[1]).format("YYYY-MM-DD"),
      person: hold_name.value,
      phone: null,
      IDNum: null,
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      total.value = data.data.data.total;
      tableData.value = data.data.data.records;
    })
    .catch((error) => {
      console.log(error);
    });
};

onMounted(() => {
  get();
});

const editor = (id) => {
  router.push({ path: "/backend/tenement/newRepair", query: { id: id } });
};

const deleteById = (id) => {
  const config = {
    url: `http://localhost:8080/property/repair/remove/${id}`,
    method: "DELETE",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      if (data.data.code === 1) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        setTimeout(() => {
          get();
        }, 2000);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>

<style scoped>
.search {
  background-color: white;
  padding-bottom: 2rem;
  height: auto;
  margin-top: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin-top: 2rem;
  margin-left: 3rem;
  margin-right: 1rem;
  height: 24px;
}

.page {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  display: flex;
  margin-top: 2rem;
  justify-content: center;
}
</style>
